﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
    <xsl:include href="_Common.xsl"/>

    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <xsl:call-template name="Header">
                <xsl:with-param name="Title" select="/file/@title"/>
            </xsl:call-template>
            <body>
                <div class="header">
                    <h1>
                        <xsl:value-of select="$ConfiguredTitle"/>
                    </h1>
                    <h2>
                        <xsl:value-of select="/file/@title"/>
                    </h2>
                    <xsl:if test="/file/@isroot = 'false'">
                        <h3>
                            <xsl:value-of select="/file/@folder"/>
                        </h3>
                    </xsl:if>
                </div>
                <!-- Display top navigation -->
                <xsl:call-template name="Navigation"/>
                <!-- Display image information -->
                <div class="information">
                    <xsl:value-of select="concat(format-number((/file/size/@bytes) div 1024, '### ### ##0,00'), ' kB, ')"/>
                    <a href="{/file/name}">
                        <xsl:value-of select="concat(/file/size/@width, ' x ', /file/size/@height, ' px')"/>
                    </a>
                </div>
                <!-- Compute dimensions -->
                <xsl:variable name="HorizontalRatio" select="850 div /file/size/@width" />
                <xsl:variable name="VerticalRatio" select="850 div /file/size/@height" />
                <!-- Display picture -->
                <div class="picture">
                    <xsl:choose>
                        <xsl:when test="$HorizontalRatio &gt;= 1 and $VerticalRatio &gt;= 1">
                            <!-- Original image is smaller than resized version -->
                            <img src="{/file/name}" alt="{/file/@title}" title="" width="{/file/size/@width}" height="{/file/size/@height}"/>
                        </xsl:when>
                        <xsl:otherwise>
                            <!-- Display scaled down version of image -->
                            <a href="{/file/name}">
                                <img src="{/file/name}.tn?Q=HQ" alt="{/file/@title}" title="">
                                    <xsl:choose>
                                        <xsl:when test="$HorizontalRatio &lt;= $VerticalRatio">
                                            <xsl:attribute name="width">850</xsl:attribute>
                                            <xsl:attribute name="height">
                                                <xsl:value-of select="round(/file/size/@height * $HorizontalRatio)"/>
                                            </xsl:attribute>
                                        </xsl:when>
                                        <xsl:otherwise>
                                            <xsl:attribute name="width">
                                                <xsl:value-of select="round(/file/size/@width * $VerticalRatio)"/>
                                            </xsl:attribute>
                                            <xsl:attribute name="height">850</xsl:attribute>
                                        </xsl:otherwise>
                                    </xsl:choose>
                                </img>
                            </a>
                        </xsl:otherwise>
                    </xsl:choose>
                </div>
                <!-- Display top navigation -->
                <xsl:call-template name="Navigation"/>
                <!-- Display footer -->
                <xsl:call-template name="Footer" />
            </body>
        </html>
    </xsl:template>

    <xsl:template name="Navigation">
        <div class="navigation">
            <xsl:choose>
                <xsl:when test="/file/prevName">
                    <a href="{/file/prevName}.html" class="prev">&lt;&lt; previous</a>
                </xsl:when>
                <xsl:otherwise>
                    <a href="." class="prev">&lt;&lt; index</a>
                </xsl:otherwise>
            </xsl:choose>
            <xsl:choose>
                <xsl:when test="/file/nextName">
                    <a href="{/file/nextName}.html" class="next">next &gt;&gt;</a>
                </xsl:when>
                <xsl:otherwise>
                    <a href="." class="next">index &gt;&gt;</a>
                </xsl:otherwise>
            </xsl:choose>
            <a href="." class="index">
                <xsl:value-of select="concat('picture ', /file/position/@current, ' of ', /file/position/@max)"/>
            </a>
        </div>
    </xsl:template>

</xsl:stylesheet>